<template>
	<view>
		<!-- 未登录 -->
		<template v-if="!loginStatus">
			<view class="flex align-center justify-center">登陆社区，体验更多功能</view>
			<otherLogin></otherLogin>
			<view class="flex align-center justify-center my-5 text-secondary" @click="openLogin">账号/手机/邮箱登陆
				<text class="iconfont icon-jinru"></text>
			</view>
		</template>
		<!-- 已登录 -->
		<view v-else class="flex p-3 align-center" hover-class="bg-light">
			<image :src="user.userpic" 
			style="width: 100rpx;height: 100rpx;border-radius: 50rpx;">
			</image>
			<view class="flex flex-column flex-1 ml-2">
				<text class="font-weight-bold font-md">{{user.username}}</text>
				<view class="flex text-muted">
					<text class="mr-2">总帖子 1</text>
					<text>今日发帖 0</text>
				</view>
			</view>
			<text class="iconfont icon-jinru"></text>
		</view>
		
		<view class="flex align-center">
			<view class="flex-1 flex flex-column align-center"
			v-for="(item, index) in myData" :key='index'>
				<text class="font-md font-weight-bold">{{item.num}}</text>
				<text class="text-muted">{{item.name}}</text>
			</view>
		</view>
		
		<view class="p-3">
			<image src="/static/demo/banner1.jpg" mode="aspectFill"
			style="width: 100%;height: 170rpx;border-radius: 20rpx;"></image>
		</view>
		
		<uniListItem title="浏览历史" showExtraIcon>
			<text slot="icon" class="iconfont icon-liulan"></text>
		</uniListItem>
		<uniListItem title="社区认证" showExtraIcon>
			<text slot="icon" class="iconfont icon-huiyuanvip"></text>
		</uniListItem>
		<uniListItem title="审核帖子" showExtraIcon>
			<text slot="icon" class="iconfont icon-keyboard"></text>
		</uniListItem>
	</view>
</template>

<script>
	import uniListItem from '@/components/uni-ui/uni-list-item/uni-list-item.vue';
	import otherLogin from '@/components/common/other-login.vue';
	import {mapState} from 'vuex'
	export default {
		components: {uniListItem,otherLogin},
		data() {
			return {
				myData: [
					{
						name: '帖子',
						num: 1
					},
					{
						name: '动态',
						num: 1
					},
					{
						name: '评论',
						num: 1
					},
					{
						name: '粉丝',
						num: 1
					}
				]
			}
		},
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url:'/pages/user-set/user-set'
			})
		},
		computed:{
			...mapState(['loginStatus','user'])
		},
		methods: {
			openLogin() {
				uni.navigateTo({
					url:'../login/login'
				})
			}
		}
	}
</script>

<style>

</style>
